<script setup>
import utils from '@/utils/storage'
import {More} from '@element-plus/icons-vue'
import { ref, watch} from "vue";

const emits = defineEmits(['delete', 'preview', 'download', 'restore', 'remove', 'completeDelete', 'changeSection'])
const checkIdList = ref([])
const dataList = ref([])
const moveId = ref()
const checkAll = ref(false)
const props = defineProps(['data', 'selection'])

watch(() => props.data, () => {
  dataList.value = props.data
}, {deep: true, immediate: true})

watch(() => dataList.value, () => {
  checkAll.value = dataList.value.filter(el => el.checked).length === dataList.value.length

}, {deep: true, immediate: true})

function handleCommand(v, it) {
  checkIdList.value.push(it)
  emits(v, it)
}

function checkAllChange(v) {
  dataList.value.forEach(el => {
    el.checked = v
  })
  checkIdList.value = v ? JSON.parse(JSON.stringify(dataList.value)) : []
}

function checkboxChange(v, it) {
  if (v) {
    checkIdList.value.push(it)
  } else {
    let index = checkIdList.value.findIndex(el => el.id === it.id)
    checkIdList.value.splice(index, 1)
  }
  console.log(v, it)
}

function onmouseover(v, it) {
  moveId.value = it.id
}

function mouseleave() {
  moveId.value = null
}

defineExpose({
  checkIdList
})
</script>

<template>
  <div class="cardWarp">
    <el-checkbox v-if="dataList.length" @change="checkAllChange" v-model="checkAll" style="margin-bottom: 6px">全选
    </el-checkbox>
    <ul>
      <el-row :gutter="10" style="display: flex;width: 100%;">
        <el-col @mouseleave="mouseleave" @mouseover="(v)=>onmouseover(v,it)" v-for="it in dataList" :key="it.id" :xs="6"
                :sm="4" :md="4" :lg="3"
                :xl="2">
          <li
              :title="it.desc"
              :class="{'is_folder':it.is_folder===1,'is_file':it.is_folder===0,'checked':checkIdList.find(el=>el.id===it.id)}">
            <div v-show="checkIdList.find(el=>el.id===it.id) || moveId===it.id" class="hover-div">
              <el-checkbox size="small" @change="(v)=>checkboxChange(v,it)" v-model="it.checked"></el-checkbox>
              <el-dropdown placement="bottom" :teleported="false" trigger="hover" @command="(v)=>handleCommand(v,it)">
                <el-icon color="#409eff" class="el-icon--right">
                  <More/>
                </el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="remove">移动</el-dropdown-item>
                    <el-dropdown-item v-if="it.del_flag===1" command="completeDelete">彻底删除</el-dropdown-item>
                    <el-dropdown-item v-else command="delete">删除</el-dropdown-item>
                    <el-dropdown-item v-if="it.del_flag===1" command="restore">恢复</el-dropdown-item>
                    <el-dropdown-item command="download">下载</el-dropdown-item>
                    <el-dropdown-item v-if="it.is_folder===0" command="preview">预览</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <img :src="utils.imgSrc(it)" alt="">
            <span @click="handleCommand('preview',it)">{{ it.name }}</span>
            <span v-if="it.is_folder===0">{{ utils.renderSize(it.size) }}</span>
          </li>
        </el-col>
      </el-row>

    </ul>
  </div>
</template>

<style scoped lang="scss">
.cardWarp {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  ul {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;

    .checked {
      background-color: #f2faff;
    }

    .is_folder {
      padding: 20px 0;
    }

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      align-items: center;
      cursor: pointer;
      position: relative;
      padding: 20px 10px;
      transition: all .3s;
      border-radius: 6px;

      &:hover {
        background-color: #f2faff;
      }

      span:nth-of-type(1):hover {
        color: var(--el-color-primary);
      }

      span:nth-of-type(2) {
        font-size: 12px;
        margin-top: 2px !important;
        color: darkgray;
      }

      span {
        font-size: 14px;
        display: inline-block;
        width: 100%;
        word-break: break-all;
        margin: 5px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .is_file {
        width: 60px;
        height: 60px;
      }

      .is_folder {
        width: 60px;
        height: 60px;

      }
    }
  }
}

.hover-div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
  top: -10px;
  width: 100%;

  ::v-deep(.el-dropdown) {
    margin-top: 4px;
  }
}
</style>